<!--用户中心的下拉栏-->
<!--parent:statusBar-->
<script setup lang="ts">
import {ref, watch} from 'vue'
import {useClickAway} from "@/utils";
import {useRouter} from "vue-router";
import useSettingStore from '@/app/setting/setting.store'
import useTaskStore from '@/store/task'
//定义区
const props = withDefaults(
    defineProps<{
      btnDom: Document | null
    }>(),
    {
      btnDom: null
    }
);

//userCenter的隐藏和展示
//隐藏或显示状态
const show = ref<boolean>(false)

//样式
const opacity = ref<number>(0)
const display = ref<string>('none')
//隐藏
const hideUserCenter = () => {
  opacity.value = 0
  setTimeout(() => {
    display.value = 'none'
  }, 300)
  show.value = false
}
//显示
const showUserCenter = () => {
  show.value = true
  //消除掉显示在表层的提醒
  display.value = 'block'
  setTimeout(() => {
    opacity.value = 1
  }, 20)

}
//暴露出去此方法以便外面的按钮进行调用
const handlerUserCanter = () => {
  if (show.value) {
    hideUserCenter()
  } else {
    showUserCenter()
  }
}
defineExpose({handlerUserCanter})

//点击其他地方隐藏（ClickAway）
const userCenterRef = ref<Document | null>(null)
//绑定ClickAway方法
const clickAwayHidden = () => {
  if (userCenterRef.value && props.btnDom) {
    useClickAway(() => {
      if (show.value) {
        hideUserCenter()
      }
    }, [userCenterRef.value, props.btnDom])
  }
}
//在btnDom有值的时候绑定上
watch(() => props.btnDom, (newVal: Document) => {
  if (newVal) {
    clickAwayHidden()
  }
})

//userCenter业务操作

//个人资料被点击
const settingStore = useSettingStore()
const taskStore = useTaskStore()
const profileClick = () => {
  taskStore.OPEN_APP('setting')
  settingStore.setSelectedKeys('ProfileSetting')
  settingStore.setOpenKeys('profile')
}
//退出按钮被点击
const router = useRouter()
const exitClick = () => {
  sessionStorage.removeItem("token")
  router.replace('/login')
}
interface selectType {
  text: string,
  name: string,
  handler: Function
}

//选项配置列表
const selectList = ref<Array<selectType>>([
  {
    text: '个人资料',
    name: 'profile',
    handler: profileClick
  }, {
    text: '退出',
    name: 'exit',
    handler: exitClick
  },
])

//某个选项被点击
const selectClick = (select: selectType) => {
  if (select) {
    select.handler()
  }
}
</script>
<template>
  <div class="user-center" ref="userCenterRef" :style="{opacity:opacity,display:display}">
    <div class="user-center-container">
      <template v-for="(select,idx) in selectList">
        <div class="user-select-item" @click="selectClick(select)">
          <div class="text">
            {{ select.text }}
          </div>
        </div>
        <div class="divider-container" v-if="idx+1!==selectList.length">
          <a-divider class="divider"/>
        </div>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
.user-center {
  box-shadow: -2px -1px 7px rgb(0 0 0 / 25%);
  position: absolute;
  //height: 200px;
  width: 100px;
  left: 50%;
  transform: translateX(-50%);
  top: 40px;
  background-color: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  //background-color: #A8A9AB;
  border-radius: 10px;
  transition-property: opacity;
  transition: 0.3s;
  padding: 8px;

  .user-center-container {
    height: 100%;

    .user-select-item {
      height: 30px;
      border-radius: 10px;
      color: #4D4B4F;

      .text {
        text-align: center;
        line-height: 30px;
        font-weight: 500;
        font-size: 14px;
      }
    }

    .user-select-item:hover {
      color: #1B1A1F;
    }

    .user-select-item:active {
      color: #4D4B4F;
    }

    .divider-container {
      width: 80%;
      margin: 0 auto;

      .divider {
        margin: 8px 0;
        padding: 0;
      }
    }


  }
}
</style>
